<template>
	<view id="in-wh-container">
		<view class="info-avatar">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<u-form labelPosition="left" :model="form" :rules="rules" ref="whFormRef">
			<u-row>
				<u-col span="5" offset='1'>
					<u-form-item labelWidth="180" label=" 身份证正面" prop="sex" label-position='top'>
						<u-upload :action="action" :file-list="fileList" max-count='1'></u-upload>

					</u-form-item>
				</u-col>
				<u-col span="5" offset='1'>
					<u-form-item labelWidth="180" label=" 身份证反面" prop="sex" label-position='top'>
						<u-upload :action="action" :file-list="fileList" max-count='1'></u-upload>

					</u-form-item>
				</u-col>
			</u-row>
			<u-row>
				<u-col span="5" offset='1'>
					<u-form-item labelWidth="180" label=" 我的照片" prop="sex" label-position='top'>
						<u-upload :action="action" :file-list="fileList" max-count='1'></u-upload>

					</u-form-item>
				</u-col>
			</u-row>
			<u-form-item  label-align="right" prop="nickName" borderBottom>
				<u-input v-model.number="form.nickName" :border="border"
					placeholder="请输入我的昵称" @confirm="inputTray"></u-input>
			</u-form-item>
			<u-form-item  label-align="right"  prop="sex" >
				<u-input v-model="form.sex" @click="show = true" type="select" :border="border" disabled placeholder="请选择性别" />

			</u-form-item>
			<u-form-item  label-align="right" ><u-input v-model="form.intro" type='textarea'
					:border="border" :height="height" :auto-height="autoHeight" placeholder="请输入个人介绍"/></u-form-item>

		</u-form>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<view class="footer">
			<u-button type='warning' @click="save">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				border: true,
				height: 100,
				autoHeight: true,
				form: {
					nickName: '',
					sex: '',
					intro:''
				},
				list: [{
						value: '0',
						label: '男'
					},
					{
						value: '1',
						label: '女'
					},
				],
				rules: {
					nickName: [{
						required: true,
						message: '请输入服务价格',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					sex: [{
						required: true,
						message: '请选择服务项目',
						trigger: ['change'],
					}]

				},
				action: 'http://www.example.com/upload',
				fileList: []

			}
		},
		methods: {
			inputTray() {},
			saveCheckParam() {
				if (!this.form.nickName) {
					uni.showToast({
						icon: 'none',
						title: '昵称为空',
						duration: 3000
					});
					return true;
				}
				if (!this.form.sex) {
					uni.showToast({
						icon: 'none',
						title: '性别为空',
						duration: 3000
					});
					return true;
				}
				if (!this.form.intro) {
					uni.showToast({
						icon: 'none',
						title: '简介为空',
						duration: 3000
					});
					return true;
				}
				return false;
			},

			confirm(e) {
				this.form.sex = e[0].label
			},

			save() {
				if (this.saveCheckParam()) {
					return;

				}
				uni.navigateBack()

			}

		},
	}
</script>

<style lang="scss">
	#in-wh-container {
		padding: 0 10rpx;
		padding-bottom: 120rpx;

		.info-avatar {
			display: flex;
			justify-content: center;
			margin: 22rpx 0;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}

		.u-form-item {
			font-size: 15px;
			font-weight: bold;
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			& button {
				width: 100%;
			}
		}
	}
</style>